<div
  class="slots-and-numbers"
  [class.mini-3e]="isMini3E()"
  [class.mini-3x]="isMini3X()"
  [class.mini-3xl]="isMini3Xl()"
>
  @for (slot of slots(); track slot.drive_bay_number; let index = $index) {
    <div class="slot">
      <span class="slot-number">{{ index + 1 }}</span>
      <span class="slot-contents">
        {{ slot.dev || ('Empty' | translate) }}
      </span>
    </div>
  }
</div>

<div class="enclosure">
  <ix-enclosure-side
    [enclosure]="enclosure()"
    [slotTintFn]="poolTint()"
    [selectedSlot]="selectedSlot()"
    (selectedSlotChange)="onSlotSelected($event)"
  ></ix-enclosure-side>
</div>

<div
  class="disk-status"
  [class.mini-3e]="isMini3E()"
  [class.mini-3x]="isMini3X()"
  [class.mini-3xl]="isMini3Xl()"
>
  @for (slot of slots(); track slot.drive_bay_number; let index = $index) {
    <div class="slot">
      <div class="slot-status">
        <ix-mini-slot-status [slot]="slot"></ix-mini-slot-status>
      </div>
    </div>
  }
</div>
